<!-- WebComponent example based off element-boilerplate: https://github.com/webcomponents/element-boilerplate -->
<template>
    <style> 
        .scroll-view {
              height: 150px;
              width: 100%;
        }

        .scroll-y { 
              overflow : hidden;
              overflow-y: scroll;
        }

        .scroll-X {
              overflow-x : scroll ;
              overflow-y : hidden ;
        }

        .scroll-x div{
              float: left;
        }

    </style>

    <div class="scroll-view"> 
            <content></content> 
    </div>

</template>
<script>
    (function() {
        // Creates an object based in the HTML Element prototype
        var element = Object.create(HTMLElement.prototype); 
        // Fires when an instance of the element is created
        var nodeDocument = document.currentScript.ownerDocument;
        element.createdCallback = function() {
            // Gets content from <template>
            var tagDIV = nodeDocument.querySelector('template').content.querySelector(".scroll-view"); 
            if ( this.getAttribute('scroll-y') !== null ) {  
                tagDIV.className = "scroll-view" + " scroll-y";
            }
            if ( this.getAttribute('scroll-X') !== null ) { 
               // var innerBox = nodeDocument.querySelector('template').content.querySelector("#innerWarp");
               // innerBox.style
                tagDIV.className = "scroll-view" + " scroll-X";
            }
            var template = nodeDocument.querySelector('template').content;
            // Creates the shadow root
            var shadowRoot = this.createShadowRoot();
            // Adds a template clone into shadow root

            var clone = document.importNode(template, true);
            
            //console.log(shadowRoot.)
            shadowRoot.appendChild(clone);
        }; 
        document.registerElement('wx-scrollview', {
            prototype: element
        });
    }());
</script>